<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/04.css">

</head>

<body>
    <header>
        <i class="iconfont icon-zuojiantou"></i>
        <span>商品列表</span>
    </header>

    <main>
        <div class="input">
            <span>商品名:</span>
            <input type="text" placeholder="请输入商品名" id="name">
        </div>
        <div class="input">
            <span>商品标题:</span>
            <input type="text" placeholder="请输入商品标题" id="title">
        </div>
        <div class="input">
            <span>商品分类:</span>
            <input type="text" placeholder="请输入商品分类" id="type">
        </div>
        <div class="input">
            <span>商品标签:</span>
            <input type="text" placeholder="请输入商品标签" id="tags">
        </div>
        <div class="input">
            <span>原价:</span>
            <input type="text" placeholder="请输入商品原价" id="oldPrice">
        </div>
        <div class="input">
            <span>现价:</span>
            <input type="text" placeholder="请输入商品现价" id="currentPrice">
        </div>
        <div class="image">
            <span>商品图片:</span>
            <div class="image-sto">
                <div class="uplo">
                    <input type="file" class="image-list">
                    <i class="iconfont icon-tianjia"></i>
                </div>
                <img src="" alt="">
            </div>
        </div>
        <div class="text">
            <span>商品介绍:</span>
            <textarea cols="25" rows="5" placeholder="请输入商品详情介绍" id="descText"></textarea>
        </div>
        <button>上传商品</button>
    </main>

    <footer>
        <div class="btn">
            <i class="iconfont icon-liebiao"></i>
            <span>列表</span>
        </div>
        <div class="btn">
            <i class="iconfont icon-tianjia"></i>
            <span>添加</span>
        </div>
    </footer>

    <script src="./http.js"></script>
    <script>
        let img = document.querySelector('.image-list')
        let img1 = document.querySelector('.image-sto img')

        let userIdDom = document.querySelector('#name')
        let titleDom = document.querySelector('#title')
        let typeDom = document.querySelector('#type')
        // type: number
        let oldPriceDom = document.querySelector('#oldPrice')
        // type: number
        let currentPriceDom = document.querySelector('#currentPrice')
        let tagsDom = document.querySelector('#tags')
        let descTextDom = document.querySelector('#descText')
        let btnDom = document.querySelector('button')

        const data = {
            userId: '',
            title: '',
            img: '',
            type: '',
            current_price: null,
            old_price: null,
            tags: '',
            desc_text: ''
        }

        img.addEventListener('change', function () {
            let file = img.files[0];
            let formData = new FormData();
            formData.append('file', file);
            http.upload('http://8.137.157.16:9000/goods/upload', formData, function (res) {
                console.log(res);
                img1.src = 'http://8.137.157.16:9000' + res.data;
                data.img = img1.src
                console.log(img1.src);
            })
        })

        btnDom.addEventListener('click', function () {
            data.userId = userIdDom.value
            data.title = titleDom.value
            data.type = typeDom.value
            data.current_price = currentPriceDom.value
            data.old_price = oldPriceDom.value
            data.tags = tagsDom.value
            data.desc_text = descTextDom.value

            http.post('http://8.137.157.16:9000/goods/add', data, function (res) {
                console.log(res);
            })
            console.log(data);
        })
    </script>
</body>

</html>